<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户管理--用户添加界面</title>
		<link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/nice-validator/jquery.validator.css" />
		<script type="text/javascript" src="/nice-validator/jquery.validator.js"></script>
		<script type="text/javascript" src="/nice-validator/zh-CN.js"></script>
	</head>
	<body style="background-color: #F5F5F5">
		<div class="container">
			<div class="row clearfix">
				<div class="col-md-12 column">
					<div class="row alert alert-info" style="margin: 4px; padding: 5px">
						<ul class="breadcrumb">
							<li class="active">新增用户</li>
						</ul>
					</div>
					
					<form action="/back/userinfo/addUser" method="post" class="form-horizontal" data-validator-option="{theme:'bootstrap', timely:true, stopOnError:true}">
						<h5 class="page-header alert-info" style="margin: 0px;padding: 10px;margin-bottom: 10px;">基本信息</h5>
						<div class="row">
							<div class="col-xs-5">
								<div class="form-group">
									<label class="col-xs-4 control-label">姓名：</label>
									<div class="col-xs-8">
										<input type="text" class="form-control" name="name" placeholder="请输入姓名" data-rule="姓名:required;"/>
									</div>
								</div>
							</div>
							
							<div class="col-xs-7">
								<div class="form-group">
									<label class="col-xs-4 control-label">手机号：</label>
									<div class="col-xs-8">
										<input type="text" class="form-control" name="mobilephone" data-rule="手机号:required;length[11]" placeholder="请输入手机号"/>
									</div>
								</div>
							</div>
						</div>
						
						<div class="row">
							
						</div>
						
						<div class="row">
							<div class="col-xs-5">
								<div class="form-group">
									<label class="col-xs-4 control-label">性别：</label>
									<div class="col-xs-8">
										<select class="form-control" name="sex">
											<option>保密</option>
											<option value="1" >男</option>
											<option value="0" >女</option>
										</select>
									</div>
								</div>
							</div>
						</div>
						
						<h5 class="page-header alert-info" style="margin: 0px;padding: 10px;margin-bottom: 10px;">账号信息</h5>
						<span id="mes"></span>
						<div class="row">
							<div class="col-xs-5">
								<div class="form-group">
									<label class="col-xs-4 control-label">用户名：</label>
									<div class="col-xs-8">
										<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名" data-rule="用户名:required;"/>
									</div>
								</div>
							</div>
							
							<div class="col-xs-7">
								<div class="form-group">
									<label class="col-xs-4 control-label">密码：</label>
									<div class="col-xs-8">
										<input type="password" class="form-control" name="password" placeholder="请输入密码" data-rule="密码:required;"/>
									</div>
								</div>
							</div>
						</div>
						
						<div class="row">
							
						</div>
						
						<div class="row">
							<div class="col-xs-5">
								<div class="form-group">
									<label class="col-xs-4 control-label">账号类型：</label>
									<div class="col-xs-8">
										<select class="form-control" name="usertype">
											<option value="1" >顾客</option>
											<option value="2" >卖家</option>
										</select>
									</div>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-xs-12 col-xs-offset-4">
								<input type="submit" class="btn btn-sucess" value="新增用户"/>
								<input type="reset" class="btn btn-danger" value="重置信息"/>
								<a href="/back/userinfo/list?page=1" class="btn btn-info">取消</a>
							</div>
						</div>
					</form>
					
					<script type="text/javascript">
						$(function(){
							$("#username").blur(function(){
								$.post(
								"/back/userinfo/validatorUsername",		
								{
									username:$(this).val()
								},
								function(e){
									$("#mes").html(e);
								}
								);
							});
							
						});
					
					</script>
					
				</div>
			</div>
		</div>
	</body>
</html>